<template>
<div>
	<div class="login" v-if="yanzheng">
		<div class="login-top">
			<p>登录/注册</p>
			<span style="color: #666;">新用户验证成功即自动注册</span>
		</div>
		<div class="flex" style="align-items: stretch;margin-bottom: 30px;">
			<div class="input" style="line-height:44px;margin-right: 5px;width: 50px;">86</div>
			<div class="input" style="flex: 1;">
				 <van-field style="font-size: 16px;" clearable v-model="value"  placeholder="请输入手机号"/>
			</div>
		</div>
		<div class="input" style="margin-bottom: 30px;">
			<van-field style="font-size: 16px;" clearable v-model="password" type="password"  placeholder="请输入密码" />
		</div>
		<van-button style="font-size: 18px;" color="linear-gradient(134deg,#00d4e3 0,#00cad8 100%)" round size="large" :disabled="value?false:true" @click="huoqu">获取验证码</van-button>
		<div style="position: absolute;bottom: 90px; font-size: 12px;">
			<van-checkbox v-model="checked" shape="square" icon-size="12px">已阅读并同意 <span class="xieyi">《用户服务协议》</span> <span class="xieyi">《用户服务协议》</span> </van-checkbox>
		</div> 
	</div>
	<div v-else style="text-align: center;">
		<div style="font-size: 28px;color: #333;font-weight: 500; margin: 40px 0;">
			请输入验证码
		</div>
		<div class="flex flex_align " style="padding: 0 20px;">
			<div style="flex: 1;">
				<van-password-input
				  :value="yanvlue"
				  :length="4"
				  :gutter="10"
				  :focused="showKeyboard"
				  @focus="showKeyboard = true"
				/>
			</div>
			<div class="chongx" @click="chonxin" :class="daojishi=='重新获取'?'':'bunnegjian'">
				{{daojishi}}
			</div>
			<van-number-keyboard
			  v-model="yanvlue"
			  :show="showKeyboard"
			  @blur="showKeyboard = false"
			/>
		</div>
	</div>
	<div class="dolod" v-show="show">
		<div v-if="!showHk" class="tank">
			<div style="font-size: 20px;margin-bottom: 10px;	text-align: center;">请阅读并同意以下协议</div>
			<div>为保障您的个人信息安全，使用登录注册功能需要您先阅读并同意 <span class="xieyi">《用户服务协议》</span> <span class="xieyi">《用户服务协议》</span></div>
			<span class="button" @click="show=false">不同意</span>
			<span class="button" style="background: #00D4E3;color: #fff; border-color: #00D4E3;" @click="show=false,checked=true">同意</span>
		</div>
		<div v-else class="tank">
			<div style="font-size: 20px;margin-bottom: 10px;	text-align: center;">滑块验证</div>
			<drag-verify
			  style="margin: 0 auto;"    
			  ref="dragVerify"  
			  handlerBg="#00AE44"  
			  :isPassing.sync="isPassing" 
			  text="请按住滑块,拖到右边"   
			  successText="验证通过" 
			  handlerIcon="icon icon-shuang"  
			  successIcon="icon icon-shuang"
			  @passcallback="passcallback" 
			>
			 
			</drag-verify>
		</div>
	</div>
</div>
</template>

<script>
	import dragVerify from 'vue-drag-verify2'
	import { Toast } from 'vant';
	
	export default{
		name:"Login",
		data() {
			return{
				yanvlue:"",
				value:"",
				password:"",
				checked:false,
				show:false,
				yanzheng:true,
				isPassing:false,
				showHk:false,
				showKeyboard:false,
				daojishi:"重新获取",
				timer:null
			}
		},
		components: {
		    dragVerify,
		},
		beforeDestory(){
			clearInterval(this.timer)
		},
		watch:{
			yanvlue(newval,oldval){
				if(newval.length==4){
					localStorage.setItem("userinfo",JSON.stringify({phone:this.value,username:"去哪儿用户",useractive:"https://qcommons.qunar.com/headshot/headshotsById/435109994.png?l&ssl=true&_=1699427420012",uid:"1"}))
					this.$router.go(-1)
				}
			}
		},
		methods:{
			passcallback(){
				this.yanzheng = false
				this.isPassing = false,
				this.show = false
				console.log("发送验证码")
				let time = 60
				let that = this
				this.timer = setInterval(function(){
					time --
					that.daojishi =  time + "s后重发"
					if(time==0){
						that.daojishi = "重新获取"
						clearInterval(that.timer)
					}
				},1000)	
			},
			chonxin(){
				this.showHk = true
				this.show = true
				
				
			},
			huoqu(){
				if(!this.checked){
					this.show = true
				}else{
					let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
					if(!re.test(this.value)){
						Toast("请输入正确手机号")
						return
					}
					if(!this.password){
						Toast("请输入密码")
						return
					}
					this.chonxin()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.login{
		font-size: 16px;
		padding:0 30px;
	}
	.chongx{
		    width: 70px;
		    height: 24px;
		    line-height: 24px;
		    padding-left: 6px;
		    padding-right: 6px;
		    background: #00cad8;
		    border-radius: 2px;
		    font-size: 14px;
		    color: #fff;
		    margin-left: 5px;
		    text-align: center;
	}
	::v-deep .van-button--disabled {
		background: #e6e6e6 !important;
		opacity: 1;
		color: #ccc !important;
	}
	::v-deep.van-password-input__item{
		border-bottom: 1px solid #d8d8d8;
	}
	.login-top{
		margin-top: 30px;
		text-align: center;
		margin-bottom: 60px;
		p{
			font-size: 28px;
			margin-bottom: 10px;
		}
	}
	.input{
		border-bottom: 1px solid #e6e6e6;
	}
	.xieyi{
		color: #00d4e3;
	}
	::v-deep .van-checkbox__label{
		line-height:normal ;
	}
	.dolod{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.70);
		.tank{
			background: #fff;
			border-radius: 8px;
			padding: 16px;
			font-size: 14px;
			color: #000;
			top: 30%;
			margin: 0 auto;
			position: relative;
			width: 70%;
			.button{
				display: inline-block;
				border: 1px solid #CCCCCC;
				border-radius: 20px;
				padding:9px 30px;
				font-size: 16px;
				color: #cccccc;
				margin-left: 15px;
				margin-top: 20px;
			}
		}
	}
	.bunnegjian{
		background: #edeff2;
		color: #666;
		pointer-events: none;
	}
</style>